<script setup>
import {INPUT_TYPE_PASSWORD, INPUT_TYPE_TEXT} from "@/constant/tail_input_constant.js"
import {reactive} from "vue"

/**
 * 响应式存储用户登录信息
 */
const userLoginInfo = reactive({
  // 账号或电子邮箱 账户
  account: '',
  // 密码
  password: '',
})

</script>

<template>
  <!-- 通过密码登录表单 -->
  <div class="login-form-by-pwd">
    <!-- 登录表单输入框 -->
    <TailInput
        class="login-form-input"
        :type="INPUT_TYPE_TEXT"
        :placeholder="'请输入用户名 / 账号 / 电子邮箱 / 手机号'"
        :font-size="'0.9rem'"
        :autofocus="true"
        v-model="userLoginInfo.account"
        :maxlength="255"
        :enable-clear="userLoginInfo.account.length > 0"
    >
      <!-- 输入框前缀图标 -->
      <template #preIcon>
        <span class="iconfont">&#xe604;</span>
      </template>
      <!-- 输入框清除图标 -->
      <template #clearIcon>
        <span class="iconfont">&#xe724;</span>
      </template>
    </TailInput>
    <!-- 验证码输入框 -->
    <TailInput
        class="login-form-input"
        :type="INPUT_TYPE_PASSWORD"
        :placeholder="'请输入密码'"
        :font-size="'0.9rem'"
        :maxlength="16"
        v-model="userLoginInfo.password"
        :enable-show-password="userLoginInfo.password.length > 0"
        :enable-clear="userLoginInfo.password.length > 0"
    >
      <!-- 输入框前缀图标 -->
      <template #preIcon>
        <span class="iconfont">&#xe703;</span>
      </template>
      <!-- 显示密码图标 -->
      <template #showPwdIcon>
        <span class="iconfont">&#xe654;</span>
      </template>
      <!-- 隐藏密码图标 -->
      <template #hidePwdIcon>
        <span class="iconfont">&#xe643;</span>
      </template>
      <!-- 输入框清除图标 -->
      <template #clearIcon>
        <span class="iconfont">&#xe724;</span>
      </template>
    </TailInput>
    <!-- 登录按钮 -->
    <div class="login-btn">
      <el-button type="primary">登录</el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
/*
 * 通过密码登录表单
 */
.login-form-by-pwd {

  /*
   * 登录表单输入框
   */
  .login-form-input {
    width: var(--login-form-item-width);
    height: var(--login-form-item-height);
    margin-bottom: 1rem;

    /*
     * 获取验证码按钮
     */
    .get-code-btn {
      height: 100%;
    }
  }

  /*
   * 登录按钮
   */
  .login-btn {
    width: var(--login-form-item-width);
    height: var(--login-form-item-height);

    .el-button {
      width: 100%;
      height: 100%;
    }
  }
}
</style>